<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片懒加载</title>
</head>
<body>
<div>
    <img src="../images/IMG.png" data-src="https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_1280.jpg"
         alt="">
    <img src="../images/IMG.png" data-src="https://cdn.pixabay.com/photo/2014/08/01/00/08/pier-407252_1280.jpg"
         alt="">
    <img src="../images/IMG.png"
         data-src="https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_1280.jpg" alt="">
    <img src="../images/IMG.png" data-src="https://cdn.pixabay.com/photo/2014/08/01/00/08/pier-407252_1280.jpg"
         alt="">
    <img src="../images/IMG.png"
         data-src="https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_1280.jpg" alt="">
    <img src="../images/IMG.png" data-src="https://cdn.pixabay.com/photo/2014/08/01/00/08/pier-407252_1280.jpg"
         alt="">
    <img src="../images/IMG.png"
         data-src="https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_1280.jpg" alt="">
    <img src="../images/IMG.png" data-src="https://cdn.pixabay.com/photo/2014/08/01/00/08/pier-407252_1280.jpg"
         alt="">
    <img src="../images/IMG.png"
         data-src="https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_1280.jpg" alt="">
    <img src="../images/IMG.png" data-src="https://cdn.pixabay.com/photo/2014/08/01/00/08/pier-407252_1280.jpg"
         alt="">
    <img src="../images/IMG.png"
         data-src="https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_1280.jpg" alt="">
    <img src="../images/IMG.png" data-src="https://cdn.pixabay.com/photo/2014/08/01/00/08/pier-407252_1280.jpg"
         alt="">
    <img src="../images/IMG.png"
         data-src="https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_1280.jpg" alt="">
    <img src="../images/IMG.png" data-src="https://cdn.pixabay.com/photo/2014/08/01/00/08/pier-407252_1280.jpg"
         alt="">
    <img src="../images/IMG.png"
         data-src="https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_1280.jpg" alt="">
    <img src="../images/IMG.png" data-src="https://cdn.pixabay.com/photo/2014/08/01/00/08/pier-407252_1280.jpg"
         alt="">
    <img src="../images/IMG.png"
         data-src="https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_1280.jpg" alt="">
    <img src="../images/IMG.png" data-src="https://cdn.pixabay.com/photo/2014/08/01/00/08/pier-407252_1280.jpg" alt="">
</div>
<script>
    var img = document.getElementsByTagName("img");
    var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
    lazyload(); //页面载入完毕加载可是区域内的图片
    // 节流函数，保证每200ms触发一次
    function throttle(event, time) {
        let timer = null;
        return function (...args) {
            if (!timer) {
                timer = setTimeout(() => {
                    timer = null;
                    event.apply(this, args);
                }, time);
            }
        }
    }

    window.addEventListener('scroll', throttle(lazyload, 200))

    function lazyload() { //监听页面滚动事件
        var seeHeight = window.innerHeight; //可见区域高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
        for (var i = n; i < img.length; i++) {
            console.log(img[i].offsetTop, seeHeight, scrollTop);
            if (img[i].offsetTop < seeHeight + scrollTop) {
                if (img[i].getAttribute("src") === "../images/IMG.png") {
                    img[i].src = img[i].getAttribute("data-src");
                }
                n = i + 1;
            }
        }
    }
</script>
</body>
</html>
